* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: rgb(254, 246, 239);
  font-family: 苹方-简, 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei',
    华文细黑, STHeiti, MingLiu;
}

#main {
  height: 100%;
  width: 100%;
}

.process p {
  margin-left: 4.17rem;
  font-size: 2.66rem;
}

#main #header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background: rgb(254, 246, 239);
  border-bottom: 1px solid #e4e4e4;
  color: #1e1e1e;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.5rem;
}

#main #header #mypage img {
  width: 100%;
}

#main #content {
  overflow-y: scroll;
}

#main #shelter {
  /* position: absolute; */
  position: fixed;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 100%;
  height: 100%;
}

#content #course_tag {
  width: 57.17rem;
  height: 19.33rem;
  margin: 10px auto;
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  box-shadow: #e4e4e4 1px 1px 5px;
}

#course_tag #tag_left,
#course_tag #tag_right {
  float: left;
  height: 80%;
}

#course_tag #tag_left {
  width: 15.47rem;
  height: 15.47rem;
  margin-top: 1.93rem;
  margin-left: 1.93rem;
  border-radius: 12px;
}

#course_tag #tag_left > img {
  border-radius: 15%;
  width: 100%;
  height: 100%;
  background: no-repeat fixed;
  background-size: 100%;
}

#course_tag #tag_right {
  height: 15.47rem;
  width: 39rem;
  margin-top: 1.93rem;
}

#course_tag #tag_right #course_name {
  width: 100%;
  height: 73%;
}

#course_tag #tag_right #course_name #title {
  clear: both;
  padding-top: 0.42rem;
  margin-left: 1.83rem;
  font-size: 2.66rem;
}

#course_tag #tag_right #course_name #intro {
  padding: 0.42rem;
  margin-left: 1.4rem;
  color: #d1d1d1;
  font-size: 2rem;
}

#course_tag #tag_right #course_status {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 27%;
}

#course_tag #tag_right #course_status #row_star {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 21.71rem;
  /* background-color: skyblue; */
}

#course_status #row_star img {
  width: 3.75rem;
  height: 3.75rem;
  padding-left: 1.67rem;
}

#tag_right #course_status #arrows img {
  height: 100%;
  object-fit: cover;
}

#course_tag #tag_right #course_status #arrows {
  height: 100%;
  width: 4rem;
  background: url(../images/下拉.png);
  background-position: center;
  background-size: 300%;
}

#slide_down {
  position: relative;
  top: 0.41rem;
  left: 0;
  width: 57.17rem;
  height: 50.84rem;
  margin-bottom: 3.87em;
  border-radius: 12px;
  margin: 5px auto;
  border-radius: 12px;
  background-color: #fff;
}

#slide_down #slide_left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  float: left;
  height: 100%;
  width: 20%;
  background: url(../images/star-bg.png) no-repeat center;
  background-size: 20% 100%;
}

#slide_down #slide_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  float: right;
  height: 100%;
  width: 75%;
  margin-right: 1.41rem;
}

#slide_down #slide_right .process {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 11rem;
  border-radius: 10px;
  box-shadow: #e4e4e4 1px 1px 5px;
}

#slide_down #slide_right .process > img {
  /* height: 100%; */
  height: 7.08rem;
  margin-left: 6.25rem;
}

#slide_down #slide_right .process > div > img {
  width: 2.91rem;
  height: 3.5rem;
}

#slide_down #slide_left img {
  width: 3.75rem;
  height: 3.75rem;
  padding: 1rem;
  background-color: #fff;
}

#main #footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-image: linear-gradient(180deg, #f7c797, #fcb49c);
}

#main #footer #my_course,
#main #footer #study_report {
  position: relative;
  width: 50%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#main #footer #study_report {
  color: #fff;
}

#main #footer #my_course {
  color: blue;
}

#footer #my_course .icon,
#footer #study_report .icon {
  width: 3.33rem;
  height: 3.33rem;
}

#footer #my_course .icon {
  background: url('../images//我的课程蓝.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#footer #study_report .icon {
  background: url('../images/报告.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#main #footer #my_course p,
#main #footer #study_report p {
  font-size: 1.67rem;
}

#gsyr {
  height: 40%;
  margin-left: 20%;
}

#yljj {
  height: 40%;
  margin-left: 20%;
}

#dssy {
  height: 40%;
  margin-left: 20%;
}

#kcbg {
  height: 3.5rem;
  margin-left: 8.67rem;
}

.notclick {
  pointer-events: none;
}
